<!--审批8大类型-->
<template>
  <div class="approveTypeContainer">
    <!--头部bar开始-->
    <CommonBar :options="options"></CommonBar>
    <!--头部bar结束-->
    <ul class="approve_ul clearfix1">
      <li
        class="approve_li"
        v-for="(item, index) in temList"
        :key="index"
        @click="toApply(item.group_id,item.imgicon)"
      >
        <van-image width="45" height="45" :src="item.imgicon" class="imgicon" />
        <span class="texta">{{item.text}}</span>
      </li>
    </ul>
  </div>
</template>
<script>
import { mapState } from "vuex";
import CommonBar from "../common/commonBar";
export default {
  components: {
    CommonBar
  },
  computed: {
    ...mapState({
      token: state => state.Authorization
    })
  },
  data() {
    return {
      nochekData: require("../../../static/image/nochekData.png"),
      temimg: require("../../../static/image/approve_one.png"),
      options: {
        type: "icon",
        centerText: "审批模板",
        iconNname: "wap-home",
        lefttype: "left"
      },
      temList: [
        {
          group_id: 1,
          imgicon: require("../../../static/image/approve_one.png"),
          text: "请假"
        },
        {
          group_id: 2,
          imgicon: require("../../../static/image/approve_two.png"),
          text: "出差"
        },
        {
          group_id: 3,
          imgicon: require("../../../static/image/approve_three.png"),
          text: "车辆维修"
        },
        {
          group_id: 4,
          imgicon: require("../../../static/image/approve_four.png"),
          text: "费用审批"
        },
        {
          group_id: 5,
          imgicon: require("../../../static/image/approve_five.png"),
          text: "物资采购"
        },
        {
          group_id: 6,
          imgicon: require("../../../static/image/approve_six.png"),
          text: "公务招待"
        },
        {
          group_id: 7,
          imgicon: require("../../../static/image/approve_seven.png"),
          text: "请款审批"
        },
        {
          group_id: 8,
          imgicon: require("../../../static/image/approve_eight.png"),
          text: "工资发放"
        }
      ]
    };
  },
  methods:{
      toApply(group_id,imgicon){
         this.$router.push({
        //核心语句
        path: "/approveTem", //跳转的路径
        query: {
          //路由传参时push和query搭配使用 ，作用时传递参数
          group_id,imgicon
        }
      });  
      }
  }
};
</script>

<style lang="less" scoped>
@import "../../assets/css/approve";
</style>